<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>个人消息</title>
    <link rel="stylesheet" href="CSSFile/BootStrapCSS/bootstrap.css">
    <link rel="stylesheet" href="CSSFile/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1266869_un9y3de3wam.css">
    <link rel="stylesheet" href="CSSFile/navigation.css">
    <link rel="stylesheet" href="CSSFile/Message.css">
</head>

<body>

<!--导航栏-->
<ul class="nav black container-fluid">
    <li class="col-lg-1"><a target="_top" href="Home.html">Elearning</a></li>
    <li class="col-lg-1"><a target="_top" href="CourseList.html">浏览课程</a></li>
    <li class="col-lg-1"><a href="LiveList.html">浏览直播</a></li>
    <li class="col-lg-3">
        <form class="form-inline" action="Search.html" method="post" target="_top" name="nav-form"
              onsubmit="setSearchKey()">
            <input class="form-control" type="search" placeholder="搜索感兴趣的课程" required name="search-box">
            <button class="btn btn-success" type="submit"><i class="fa fa-search" aria-hidden="true">搜索</i></button>
        </form>
    <li class="col-lg-1"><a href="Message.html">消息<span class="badge"></span></a></li>
    <li class="col-lg-1"><a href=""><img id="userimg" alt="用户头像"></a></li>
</ul>
<!--/导航栏-->

<!--消息主界面-->
<h2 style="text-align: center; margin-top: 20px">消息一览</h2>
<div class="container" style="margin-bottom: 30px">

    <div>
        <ul id="myTab" class="nav nav-tabs">
            <li><a class="on" href="#system-message" data-toggle="tab">系统消息</a></li>
            <li><a href="#personal-message" data-toggle="tab">个人消息</a></li>
        </ul>
        <button class="btn btn-danger" style="float: right" onclick="deleteAllReaded()">一键清空已读</button>
        <button class="btn btn-primary" style="float: right; margin-right: 10px" onclick="setAllMessageIsRead()">
            全部标为已读
        </button>
    </div>
    <div id="myTabContent" class="tab-content">
        <div id="system-message" class="tab-pane fade show active">
            <div class="card">
                <div class="card-header" style="font-size: 20px;text-align: center">
                    <span style="float: left">2017-07-08 17:17:17</span>
                    <a class="card-link" data-toggle="collapse" href="#sys-mes1">
                        消息
                    </a>
                    <button class="btn btn-warning btn-sm delete-button">删除</button>
                    <button class="btn btn-primary btn-sm read-button">标为已读</button>
                </div>
                <div id="sys-mes1" class="collapse" data-parent="#accordion">
                    <div class="card-body" style="text-indent: 2em">
                        个人消息
                    </div>
                </div>
            </div>
        </div>
        <div id="personal-message" class="tab-pane fade">
            <div class="card">
                <div class="card-header" style="font-size: 20px;text-align: center">
                    <span style="float: left">2017-07-08 17:17:17</span>
                    <a class="card-link" data-toggle="collapse" href="#p-mes1">
                        消息
                    </a>
                    <button class="btn btn-warning btn-sm delete-button">删除</button>
                    <button class="btn btn-primary btn-sm read-button">标为已读</button>
                    <span class="message-state">未读</span>
                </div>
                <div id="p-mes1" class="collapse" data-parent="#accordion">
                    <div class="card-body">
                        个人消息
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<script src="JSFile/jquery-3.4.1.js"></script>
<script src="JSFile/BootStrapJS/bootstrap.bundle.js"></script>
<script src="JSFile/navigation.js"></script>
<script src="JSFile/Message.js"></script>
</body>
</html>